<template>
  <div>
    <h1> 第三个子组件</h1>
    <div>
      组件内部的内容 模版 由父组件
      <!-- slot 插槽  父组件可以给插槽 传递自定义内容 -->
      <!-- 默认插槽 -->
      <slot name="header" />
      <slot />
      <!-- slot 带name 为具名插槽  父组件传递需要使用
       v-slot:name 去调用 简写为#name  -->
      <slot name="footer" />
      <!-- 作用域插槽 完成父传子和子传父 -->
      <slot name="content" :user="user" />
    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {
      user: { name: '刘德华', age: 48 }
    }
  }
}
// new Vue({
//   render:(h)=>{
//     return h('div',{
//       tag:'div',
//       key:"88",
//       atttrs:{
//         id:"box"
//       },
//       props:{},
//       class:{},
//       style:{}

//       }
//     },[
//       "你好",
//       h('span',{class:{},style:{}},"span的内容"),
//       h(<elButton>)

//     ])
//   }
// })
// 介绍项目： 项目名称：进思OA管理系统，这是一个外包项目，是一个教育机构
// 开发的人事管理系统。
// 他主要功能是 完成，人员管理，考勤管理，在线审批，消息通知，社保，工资等管理

// 我主要负责的模块有，：人员管理，考勤管理，在线审批，消息通知，社保，工资，角色，权限，登录，

// 难点：
// 亮点：

// Object.defineProperty(this.data, 'msg', {
//   get() {
//     // 去更新视图
//     // this.updateView()
//     return this.msg
//   },
//   set(newVal) {
//     this.msg = newVal
//   }
// })
// updateView(){
//   // 用到了diff算法更新dom
//    patchVod(this.oldVnode,this.newVnode);
//    removeVnode()删除如何发现旧节点有，新节点没有
//     addVnode         如果新节点有，旧节点没有
//     sameVnode(新，旧){
//       if(this.旧.key==this.新.key&&this.tag==this.新.tag){
//         updateVnode()
//       }
//     }
// }
// new Vue({
//   render:(h)=>{
//     return h('div',{
//       tag:'div',
//       key:"88",
//       atttrs:{
//         id:"box"
//       },
//       props:{},
//       class:{},
// })
</script>
<style lang="scss">

</style>
